<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <input type="text" class="username">
    <br>
    <input type="text" class="password">
    <br>
    <button>登录</button>

    <script>

        // 已知接口为jsonp  http://43.138.81.225/php/login_jsonp.php
        // 请求方式get
        // 参数  username   password
        // 返回的值  cb({})


        // jsonp的接口 需要使用script标签去请求，而不是ajax请求

        // 注意：jsonp的接口只能处理get请求  无法处理post请求



        // 如果直接请求就会出现跨域
        // const xhr = new XMLHttpRequest() ;
        // xhr.open('get' , 'http://43.138.81.225/php/login_jsonp.php' , true) ;
        // xhr.send() ;
        // xhr.onreadystatechange = function() {
        //     if(xhr.readyState === 4 && xhr.status === 200) {
        //         let data = xhr.responseText ;
        //         console.log(data);
        //     }
        // }

        function cb(data) {
            console.log(data);
        }


        // 
        const oUser = document.querySelector('.username');
        const oPwd = document.querySelector('.password');

        const oBtn = document.querySelector('button');


        oBtn.onclick = function () {
            const username = oUser.value ;
            const password = oPwd.value ;

            const oS = document.querySelector('#s') ;
            if(oS) {
                oS.remove()
            }

            // 利用script标签请求数据
            const oScript = document.createElement('script') ;
            oScript.id = 's' ;
            oScript.src = `http://43.138.81.225/php/login_jsonp.php?username=${username}&password=${password}` ;
            document.body.appendChild(oScript);
        }


    </script>


    <!-- <script src="http://43.138.81.225/php/login_jsonp.php?username=qq&password=123"></script> -->



</body>

</html>